<template>
<div>
  <div class="box">
    <div class="box-body">
      <el-form :model="query" label-position="top">
        <el-row :gutter="15">
          <el-col :span="3">
            <el-form-item label="产品编号:">
              <el-input v-model="query.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="产品编码:">
              <el-input v-model="query.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称:">
              <el-input v-model="query.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品状态">
              <el-select v-model="query.status" multiple placeholder="选择产品状态">
                <el-option v-for="(value, key) in ItemStatus" :key="key" :label="value" :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" class="no-top-label">
              <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
  <el-table :data="page.content" :loading="query.loading" border v-on:sort-change="sort">
    <el-table-column prop="id" label="编号" width="100" column-key="id" sortable="custom" />
    <el-table-column prop="code" label="产品编码" width="220" column-key="code" sortable="custom" />
    <el-table-column prop="name" label="产品名称" column-key="name" sortable="custom" />
    <el-table-column prop="status" label="状态" column-key="status" sortable="custom" >
      <template slot-scope="scope">
          <el-tag :type="['primary', 'warning', 'success', 'danger'][scope.row.status-1]">
            {{ItemStatus[scope.row.status.toString()]}}
          </el-tag>
        </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <template v-if="scope.row.code.startsWith('USJ-')">
          <el-dropdown @click.native="syncUSJItem(scope.row)" size="small" type="primary" split-button>
            同步
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="syncUSJItemCost(scope.row)">价格</el-dropdown-item>
              <el-dropdown-item @click.native="syncUSJItemStock(scope.row)">库存</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination @current-change="showPage" :current-page.sync="page.page" 
    :page-size="page.pageSize" :total="page.totalElements" layout="total, prev, pager, next, jumper" />
</div>
</template>

<script>
import { Items } from '@/store/api'
import { ItemStatus } from '@/constants'
import Pagination from '@/utils/pagination'

export default {
  created() {
    this.loadPage(1)
  },
  data() {
    return {
      ItemStatus: ItemStatus,
      page: {
        content: []
      },
      query: {
        status: ['3'],
        loading: false
      }
    }
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.query.loading = true
      return Items.listItems(query).then(data => {
        this.page = data
        this.query.loading = false
      })
    },
    syncUSJItem(item) {
      Items.syncUSJItemCost(item.id)
      Items.syncUSJItemStock(item.id)
    },
    syncUSJItemCost(item) {
      Items.syncUSJItemCost(item.id)
    },
    syncUSJItemStock(item) {
      Items.syncUSJItemStock(item.id)
    }
  }
}
</script>
